import React, {useEffect, useRef} from "react";
import styles from "./index.module.scss";
import {IconFont} from "@/components";
import {FormBox} from '@/components/FormLayout';
import {TagOutlined} from '@ant-design/icons';
import {wrapperType, EnumControlType, layouts, IFields} from "@/pages/dv/constants/EnumCommon";

import {EE} from "@/utils";
import dvTool from "@/pages/dv/dvTool";


interface IProps {
  uid: string;
  baseConfig: any;
}

export default function BasicConfigBox({uid, baseConfig}: IProps) {

  const formRef: any = useRef();

  useEffect(() => {

    EE.on(dvTool.EnumChartFire.update_baseConfig, (config: IBaseConfig) => {
      formRef.current.setFieldsValue(config);
    })
  }, [])



  function getBaseFields(): IFields[] {
    return [
      {
        propType: 'string',
        controlType: EnumControlType.Input,
        formItemProps: {
          name: 'name',
          label: '组件名称',
        },
      },
      {
        label: baseConfig.type.toLocaleUpperCase(),
        controlType: EnumControlType.Tag,
        type: wrapperType.label,
        col: 12,
        layout: layouts.inline,
        controlProps: {
          icon: <IconFont type={'icon-chart'}/>,
          color: 'rgba(164,50,76,0.5)',
        },
      },
      {
        label: baseConfig.uid,
        controlType: EnumControlType.Tag,
        type: wrapperType.label,
        col: 12,
        layout: layouts.inline,
        controlProps: {
          icon: <TagOutlined/>,
          color: 'rgba(46,176,235,0.8)',
        },
      },
      {
        type: wrapperType.divider
      },
      {
        controlType: EnumControlType.InputNumber,
        formItemProps: {
          name: 'width',
          label: '宽度',
        },
        controlProps: {
          style: {width: '100%'}
        },
        col: 12,
      },
      {
        controlType: EnumControlType.InputNumber,
        formItemProps: {
          name: 'height',
          label: '高度',
        },
        col: 12,
        controlProps: {
          style: {width: '100%'}
        },
      },
      {
        controlType: EnumControlType.InputNumber,
        formItemProps: {
          name: 'top',
          label: '上',
        },
        col: 8,
        controlProps: {
          style: {width: '100%'}
        },
      },
      {
        controlType: EnumControlType.InputNumber,
        formItemProps: {
          name: 'left',
          label: '左',
        },
        col: 8,
        controlProps: {
          style: {width: '100%'}
        },
      },
      {
        formItemProps: {
          name: 'zIndex',
          label: '层级',
        },
        controlProps: {
          style: {width: '100%'}
        },
        col: 8,
        controlType: EnumControlType.InputNumber,
      },
      {
        type: wrapperType.divider
      },
      {
        controlType: EnumControlType.Slider,
        formItemProps: {
          name: 'rotate',
          label: '旋转角度'
        },
        col: 12,
        layout: layouts.vertical,
        controlProps: {
          step:1,
          min:0,
          max:360,
          tipFormatter: (value: number) => `∠${(value).toFixed(0)}°`,
          marks: {
            0: '0',
            180: '∠180°',
            360: '∠360°',
          }
        },
      },
      {
        controlType: EnumControlType.Slider,
        formItemProps: {
          name: 'opacity',
          label: '透明度'
        },
        col: 12,
        layout: layouts.vertical,
        controlProps: {
          step: 0.01,
          min: 0,
          max: 1,
          tipFormatter: (value: number) => `${(value * 100).toFixed(0)}%`,
          marks: {
            0: '0',
            0.5: '50%',
            1: '100%',
          },
        }
      },
      {
        propType: 'string',
        controlType: EnumControlType.Input,
        formItemProps: {
          name: 'className',
          label: 'className',
        },
      },
      {
        controlType: EnumControlType.Switch,
        formItemProps: {
          name: 'mask',
          label: '显示遮罩层',
          valuePropName: 'checked'
        },
        col: 24,
      },
      {
        controlType: EnumControlType.Switch,
        formItemProps: {
          name: 'overflowHidden',
          label: '超出隐藏',
          valuePropName: 'checked'
        },
        col: 24,
      },
    ];
  }

  function onValuesChange(changedValues: IBaseConfig, allValues: object) {
    dvTool.updateBaseConfig(uid, changedValues)
  }

  return <div className={styles.chartPanelContent}>
    <FormBox
      fields={getBaseFields()}
      initialValues={baseConfig}
      onValuesChange={onValuesChange}
      getForm={(form) => {
        formRef.current = form
      }}
    />
  </div>;
}
